class Carousel {

    constructor() {
        // this.marsk = document.getElementById("marsk")
        this.marsk = this.$('marsk')
        this.uu = this.marsk.children[0];
        this.lis = this.uu.children;

        this.arrow = this.$('arrow')
        this.btn1 = this.arrow.children[0];
        this.btn2 = this.arrow.children[1];

        this.picIndex = 0;

        this.onePicWidth = this.lis[0].offsetWidth;


        this.uuWidth = this.lis.length * this.onePicWidth + 'px';
        this.uu.style.width = this.uuWidth;
        this.circul = false;
        this.timer=null;
    }

    $ = id => document.getElementById(id);
    _c = tagName => document.createElement(tagName)
    //添加鼠标动态方法
    mouseEvent = () => {
        this.marsk.onmouseenter = () => {
            this.arrow.style.display = 'block';
            // clearInterval(this.interval);
        }
        this.marsk.onmouseleave = () => {
            this.arrow.style.display = 'none';
            // this.autoplay(); 
        }
        // this.btn1.onclick = this.prev;
        // this.btn2.onclick = this.next;

        //防抖
        this.btn1.onclick =()=>{
            if(this.timer){
                clearTimeout(this.timer);
            }
            this.timer=setTimeout(() => {
                this.prev();
            }, 300);
        }
        this.btn2.onclick =()=>{
            if(this.timer){
                clearTimeout(this.timer);
            }
            this.timer=setTimeout(() => {
                this.next();
            }, 300);
        }


    }
    //上一张轮播图触发的方法
    prev = () => {
        this.picIndex--;
        if (this.picIndex < 0&&this.circul) {
            this.uu.style.left = -(this.lis.length - 1) * this.onePicWidth + "px";
            this.picIndex = this.lis.length - 2;
        }else {
           
            if (this.picIndex < 0) {
                this.picIndex = this.lis.length - 1
            }
        }
        // this.indecatorActive()
        this.slide()
        this.indecatorActive()
    }

    //下一张轮播图触发的方法
    next = () => {
        this.picIndex++;
        if (this.picIndex === this.lis.length&&this.circul) {

            this.uu.style.left = 0;
            this.picIndex = 1;
        }else{
            if (this.picIndex === this.lis.length) {
                
                this.picIndex = 0
            }
        }
        this.slide()
        this.indecatorActive()
        
    }
    //图片划入方法
    slide() {
        animate(this.uu, -this.picIndex * this.onePicWidth)
    }
    //动态创建指示器方法
    showIndecator() {
        let indecatorEl = this._c('div');
        indecatorEl.id = 'indecator';
        for (let i = 0; i < this.lis.length; i++) {
            let span = this._c('span');
            span.innerText = i + 1;
            span.index = i;

           
            span.onclick = ()=> {
                //这里也是可以用箭头函数的，下面就可以不用_this而用this
                // let spans = span.parentNode.children;
                // for (let j = 0; j < spans.length; j++) {
                //     spans[j].className = "";
                // }
                // this.className = "active";

                this.picIndex =i;

                this.slide();

                this.indecatorActive()
            }
            indecatorEl.appendChild(span);

        }
        this.marsk.appendChild(indecatorEl);
        this.indecatorEl = indecatorEl;
        this.indecatorActive();
    }
    //图片切换让指示灯亮的方法
    indecatorActive() {
        if (this.indecatorEl) {
            let spans = this.indecatorEl.children;
            for (let i = 0; i < spans.length; i++) {
                spans[i].className = "";
            }
            if (this.picIndex === this.lis.length - 1 && this.circul) {
                spans[0].className = "active"
                return

            }
            spans[this.picIndex].className = "active"
        }
    }

    circular = () => {
        let cloneFirst = this.lis[0].cloneNode(true);

        this.uu.appendChild(cloneFirst);

        this.uu.style.width = this.lis.length * this.onePicWidth;
        this.circul = true;
    }

    autoplay = (time = 2000) => {
        this.time = time;
        
        window.onblur=()=>{
            if(this.interval){
                clearInterval(this.interval);
            }
        }
        window.onfocus=()=>{
            this.autoplay(this.time);
        }
        this.interval = setInterval(() => {
            this.next()
        }, time)
    }

    // fangdou(){
    //     this.interval=null;
    //     return fn(){

    //     }
    // }
    // this.btn1=fangdou()

}

let carousel = new Carousel()
carousel.mouseEvent()
carousel.showIndecator()
carousel.circular()
// carousel.autoplay()